<template>
  <div class="header acea-row row-middle">
    <div class="location acea-row row-middle" v-if="showCityChoose" @click="showLocation = true">
      <van-icon name="location-o" size="16" />
      <div class="city">{{location}}</div>
    </div>
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="请输入搜索关键词"
      class="search"
    />
    <van-popup v-model="showLocation" position="bottom" :style="{ height: '40%' }" >
      <van-area title="标题" @confirm="locationConfirm" :area-list="areaList" :columns-num="2" />
    </van-popup>
  </div>
</template>

<script>
import area from './area'

export default {
  name:'searchHeader',
  props:{
    showCityChoose:{
      type:Boolean,
      default:true
    },
    
  },
  data() {
    return {
      searchValue:'',
      showLocation:false,
      areaList:area,
      location:'选择城市',
    }
  },
  methods: {
    locationConfirm(e){
      this.location = e[1].name
      this.showLocation = false
    }
  },
}
</script>

<style scoped>
  .header{
    height: 120px;
    box-sizing: border-box;
    padding: 10px 25px;
  }
  .header .location{
    width: 180px;
  }
  .header .location .city{
    font-size: 26px;
    margin-left: 10px;
    /* margin-bottom: 5px; */
  }
  .header .search{
    /* width: 500px; */
    flex: 1;
  }
</style>